<template>
  <el-dialog
      title="黑名单踢人话术设置"
      :visible.sync="$attrs.visableIf"
      @close="handleCloseDialog"
      width="600px"
      append-to-body
      class="borderb_dia"
  >
    <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="150px"
        label-position="top"
    >
      <el-form-item prop="status">
        <div class="editor-big">
          <ul class="tags">
            <li v-for="(item,index) in tagsList" @click="getHtml(item)">{{ item }}</li>
          </ul>
          <div id="editor"></div>
        </div>

      </el-form-item>
    </el-form>
    <div slot="footer" class="footer-btn">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { validPhone, validPassword } from "@/utils/validate";
// import { editInfo } from "@/api/advmaster";
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor, Quill} from 'vue-quill-editor';
import quillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'

Quill.register('modules/quillEmoji', quillEmoji);
import '@/utils/customQuill.js'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      form: {},
      tagsList: ['违规群成员昵称', '白名单昵称'],
      // 表单校验
      rules: {
        name: [{required: true, message: "请输入用户名", trigger: "blur"}],
      },
      quill: null,
      options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        modules: {
          'emoji-toolbar': true,
          'emoji-shortname': true,
          // 工具栏配置
          toolbar: [
            //  ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
            //   ["blockquote", "code-block"],                    // 引用  代码块
            //  [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
            //  [{ indent: "-1" }, { indent: "+1" }],            // 缩进
            //   [{ size: ["small", false, "large", "huge"] }],   // 字体大小
            //  [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
            //  [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
            //  [{ align: [] }],                                 // 对齐方式
            //  ["clean"],                                       // 清除文本格式
            // ["link", "image", "video"],                       // 链接、图片、视频
            ['emoji'],//表情包
          ],
        },
        placeholder: "请输入内容",
        readOnly: this.readOnly,
      },
    }
  },
  props: {
    rowitem: {
      default: null,
    },
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.quill = new Quill('#editor', this.options);
      // 注册键盘事件
    })
  },
  methods: {
    //重置表单
    handleReset() {
      this.resetForm("form");
    },
    // 自定义blot
    handleCloseDialog() {
      this.$emit("update:visableIf", false);
    },

    getHtml(html) {
      this.quill.focus();
      var range = this.quill.getSelection();
      if (range) {
        if (range.length == 0) {
          console.log('User cursor is at index', range.index);
          this.quill.insertEmbed(this.quill.getSelection().index || 0, 'AppPanelEmbed', `<span class="htmlTags">${html}</span>`);
          // 调整光标到最后
          this.quill.setSelection(range.index + 1);
        }
      } else {
        console.log('User cursor is not in editor');
      }
    },

    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            // editInfo(this.form).then(() => {
            //   this.$modal.msgSuccess('修改成功')
            //   this.handleCloseDialog();
            //   this.$emit('getList');
            // })
          }
        }
      })
    },
    onEditorBlur() {
    }, // 失去焦点触发事件
    onEditorFocus() {
    }, // 获得焦点触发事件
    onEditorChange() {
    }, // 内容改变触发事件
  },
};
</script>

<style scoped lang="scss">
.operate-Big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.group-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.item-big {
  display: flex;
  flex-direction: column;
  padding-top: 8px;

  .tips {
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, .45);

  }
}

.el-radio-group {
  padding-top: 10px;

  .el-radio {
    margin-bottom: 5px;
  }
}

.editor-big {
  position: relative;

}

.tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  left: 40px;
  height: 42px;

  li {
    list-style: none;
    padding: 0px;
    margin: auto;
    background: #fff;
    border: 1px solid #e9e9e9;
    padding: 3px 8px;
    cursor: pointer;
    margin: 0;
    border-radius: 2px;
    color: #666;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;

  }
}
::v-deep .embed-innerApp {
  display: inline-block;
}
::v-deep .htmlTags {
  padding: 0 8px;
  margin: 0 8px;
  text-align: center;
  height: 26px;
  line-height: 26px;
  border-radius: 2px;
  border: 1px solid rgba(47, 84, 235, .32);
  cursor: pointer;
  color: #2f54eb;
  background: rgba(47, 84, 235, .08);
  font-size: 12px;
  display: inline-block;
}
</style>
